<template>
  <Head title="编辑物流公司 - Orange Tech" />
  <AdminLayout title="编辑物流公司" subtitle="修改物流公司信息">
    <div class="max-w-2xl">
      <form @submit.prevent="submit" class="space-y-6">
        <div class="bg-white rounded-2xl p-8 shadow-sm">
          <div class="space-y-6">
            <!-- 基本信息 -->
            <div>
              <h3 class="text-lg font-medium text-gray-900 mb-4">基本信息</h3>
              <div class="grid grid-cols-1 gap-6">
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-2">公司名称 *</label>
                  <input
                    v-model="form.name"
                    type="text"
                    required
                    class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-gray-900 focus:border-gray-900"
                    placeholder="请输入物流公司名称"
                  >
                  <div v-if="errors.name" class="mt-1 text-sm text-red-600">{{ errors.name }}</div>
                </div>

                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-2">公司代码 *</label>
                  <input
                    v-model="form.code"
                    type="text"
                    required
                    class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-gray-900 focus:border-gray-900 font-mono"
                    placeholder="请输入公司代码，如：SF、YTO、ZTO"
                  >
                  <div v-if="errors.code" class="mt-1 text-sm text-red-600">{{ errors.code }}</div>
                </div>

                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-2">官网地址</label>
                  <input
                    v-model="form.website"
                    type="url"
                    class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-gray-900 focus:border-gray-900"
                    placeholder="https://www.example.com"
                  >
                  <div v-if="errors.website" class="mt-1 text-sm text-red-600">{{ errors.website }}</div>
                </div>

                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-2">客服电话</label>
                  <input
                    v-model="form.phone"
                    type="tel"
                    class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-gray-900 focus:border-gray-900"
                    placeholder="400-123-4567"
                  >
                  <div v-if="errors.phone" class="mt-1 text-sm text-red-600">{{ errors.phone }}</div>
                </div>

                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-2">公司描述</label>
                  <textarea
                    v-model="form.description"
                    rows="3"
                    class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-gray-900 focus:border-gray-900"
                    placeholder="请输入公司描述"
                  ></textarea>
                  <div v-if="errors.description" class="mt-1 text-sm text-red-600">{{ errors.description }}</div>
                </div>
              </div>
            </div>

            <!-- 设置 -->
            <div>
              <h3 class="text-lg font-medium text-gray-900 mb-4">设置</h3>
              <div class="grid grid-cols-1 gap-6">
                <div class="flex items-center justify-between">
                  <div>
                    <label class="text-sm font-medium text-gray-700">启用状态</label>
                    <p class="text-sm text-gray-500">是否启用此物流公司</p>
                  </div>
                  <label class="relative inline-flex items-center cursor-pointer">
                    <input
                      v-model="form.is_active"
                      type="checkbox"
                      class="sr-only peer"
                    >
                    <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-gray-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-gray-900"></div>
                  </label>
                </div>

                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-2">排序</label>
                  <input
                    v-model="form.sort_order"
                    type="number"
                    min="0"
                    class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-gray-900 focus:border-gray-900"
                    placeholder="0"
                  >
                  <div v-if="errors.sort_order" class="mt-1 text-sm text-red-600">{{ errors.sort_order }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 操作按钮 -->
        <div class="flex items-center justify-end space-x-4">
          <Link
            :href="route('logistics-companies.index')"
            class="px-6 py-3 border border-gray-300 text-gray-700 rounded-xl hover:bg-gray-50 transition-colors"
          >
            取消
          </Link>
          <button
            type="submit"
            :disabled="processing"
            class="px-6 py-3 bg-gray-900 text-white rounded-xl hover:bg-gray-800 transition-colors disabled:opacity-50"
          >
            {{ processing ? '更新中...' : '更新物流公司' }}
          </button>
        </div>
      </form>
    </div>
  </AdminLayout>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { Head, Link, useForm } from '@inertiajs/vue3'
import AdminLayout from '@/Layouts/AdminLayout.vue'

const processing = ref(false)

const props = defineProps({
  company: Object
})

const form = useForm({
  name: props.company.name,
  code: props.company.code,
  website: props.company.website || '',
  phone: props.company.phone || '',
  description: props.company.description || '',
  is_active: props.company.is_active,
  sort_order: props.company.sort_order
})

const submit = () => {
  processing.value = true
  form.put(route('admin.logistics-companies.update', props.company.id), {
    onFinish: () => {
      processing.value = false
    }
  })
}

const errors = computed(() => form.errors)
</script>
